<template>
    <el-card>
        <el-button type="primary" :icon="Plus" class="mb-[20px]" v-perm="'sys:perm:add'"
            @click="openAddOrUpdatePage('add', null)">添加</el-button>
        <el-table :data="tableData" height="calc(100vh - 185px)" max-height="calc(100vh - 185px)" stripe
            :header-cell-style="{ 'background-color': 'rgba(229, 231, 235, var(--tw-bg-opacity))' }" row-key="id">
            <el-table-column prop="name" label="权限名称" width="300px" fixed="left" />
            <el-table-column prop="type" label="权限类型" width="120px">
                <template #default="scope">
                    <el-tag type="primary" v-if="scope.row.type == '1'">目录</el-tag>
                    <el-tag type="success" v-if="scope.row.type == '2'">菜单</el-tag>
                    <el-tag type="info" v-if="scope.row.type == '3'">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="perm" label="菜单&权限" width="200px" />
            <el-table-column prop="sort" label="排序" width="120px" />
            <el-table-column prop="icon" label="图标" width="120px">
                <template #default="scope">
                    <el-icon v-if="scope.row.icon != ''">
                        <component :is="scope.row.icon"></component>
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column label="创建人" width="150px">
                <template #default="scope">
                    {{ scope.row.createByRealName }}({{ scope.row.createByUsername }})
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="200px" />
            <el-table-column label="更新人" width="150px">
                <template #default="scope">
                    {{ scope.row.updateByUsername ? `${scope.row.updateByRealName}${scope.row.updateByRealName ? ' (' +
                        scope.row.updateByUsername + ')' : ''}` : scope.row.updateByUsername || '' }}
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="200px" />
            <el-table-column fixed="right" label="操作" width="140px">
                <template #default="scope">
                    <el-button link type="warning" size="small" :icon="Edit" v-perm="'sys:perm:update'"
                        @click="openAddOrUpdatePage('update', scope.row)">修改</el-button>
                    <el-button link type="danger" size="small" :icon="Delete" v-perm="'sys:perm:delete'"
                        @click="deleteById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <AddOrUpdate ref="addOrUpatePageRef" :querySelective="querySelective" :permTree="tableData"></AddOrUpdate>
</template>
<script setup>
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue'
import { querySelectReq ,deleteReq} from '@/api/sys/perm/index.js'
import AddOrUpdate from '@/views/sys/perm/AddOrUpdate.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableData = ref([])
onMounted(() => {
    querySelective();
})

const querySelective = () => {
    querySelectReq().then(res => {
        if (res.code == 200) {
            tableData.value = res.data
        }
    })
}

const addOrUpatePageRef = ref()
const openAddOrUpdatePage = (type,row) => {
    addOrUpatePageRef.value?.open(type,row)
}

const deleteById = (id) =>{
    ElMessageBox.confirm(
    '此操作将删除本权限，您确定要继续吗？',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
        deleteReq(id).then(res=>{
            if (res.code == 200) {
                 ElMessage.success(res.message)
                 querySelective();
            }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除！',
      })
    })
}
</script>